<!DOCTYPE html>
<html lang="ch-CN">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
</head>
<style>
    body {
        margin: 0;
        padding: 0;
        width: 100vw;
        height: 100vh;
        background-color: wheat;
        font-size: 30px;
        font-family: "华文楷体";
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
    }

    #box {
        background-color: khaki;
        border: 3px solid pink;
        box-sizing: border-box;
        width: 400px;
        height: 300px;
        position: relative;
        overflow: hidden;
        cursor: pointer;
    }

    ul {
        list-style: none;
        display: flex;
        flex-wrap: nowrap;
        margin: 0;
        padding: 0;
        position: absolute;
        top: 0;
        left: 0;
    }

    img {
        width: 400px;
        height: 300px;
    }

    #btn {
        position: absolute;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
    }

    button {
        margin-right: 8px;
        font-size: 20px;
        width: 25px;
        height: 25px;
        background-color: #b3b1af;
        border: none;
        border-radius: 10%;
        box-shadow: black 0 0 5px;
        transition: linear 0.2s;
        text-align: center;
        line-height: 20px;
        cursor: pointer;
    }

    button:hover {
        background-color: aquamarine;
        transform: scale(1.1);
        color: deeppink;
    }

    #left, #right {
        height: 40px;
        display: inline-block;
        position: absolute;
        font-size: 50px;
        cursor: pointer;
        line-height: 40px;
        transition: all 0.4s linear;
    }

    #left:hover, #right:hover {
        background-color: rgba(255, 255, 255, 0.5);
        transform: scale(1.1);
    }

    #left {
        top: 45%;
    }

    #right {
        top: 45%;
        right: 0;
    }
</style>
<body>
<div id="box">
    <ul id="imgList">
        <li id="li"><img src="../../Dom/image/mz12.png" alt=""></li>
        <li><img src="../../Dom/image/mz4.png" alt=""></li>
        <li><img src="../../Dom/image/mz5.png" alt=""></li>
        <li><img src="../../Dom/image/mz6.png" alt=""></li>
        <li><img src="../../Dom/image/mz7.png" alt=""></li>
        <li><img src="../../Dom/image/mz12.png" alt=""></li>
    </ul>
    <div id="btn_LR">
        <div id="left"><</div>
        <div id="right">></div>
    </div>
    <div id="btn">
        <button id="btn1" value="0"></button>
        <button id="btn2" value="1"></button>
        <button id="btn3" value="2"></button>
        <button id="btn4" value="3"></button>
        <button id="btn5" value="4"></button>
    </div>
</div>

<script>
    // 获取需要用到的对象
    { // 每次的偏移量
        var left = 0
        // 计时器
        var timer
        var Timer
        // 5个按钮跟随图片自动变色
        var count
        // 计时器的间隔
        var ob_imgList = document.getElementById("imgList");
        // 获取ob_imgList的子元素
        var imgList = ob_imgList.children;
        // ul的宽度
        var ul_Width = getStyle("imgList", "offsetWidth");
        // 一张图片的长度
        var li_Width = getStyle("li", "offsetWidth");
        // 获取按钮
        var btn = document.querySelectorAll("#btn button");
        // 获取按钮的父元素
        var Btn = document.getElementById("btn");

        // console.log(btn.length)
    }

    function carousel() {
        // 计时器
        timer = setInterval(function () {
            // 偏移量大于ul的宽度时就循环播放图片
            if (-left >= ul_Width - li_Width) {
                left = 0
            }
            // 赋值  设置偏移量
            ob_imgList.style.left = left + "px"
            // var n = (left % li_Width === 0) ? 2000 : 20
            if (left % (-li_Width) === 0) {
                clearInterval(timer)
                Timer=setTimeout(carousel, 2000)
            }
            left -= 1
            // 5个按钮跟随图片自动变色
            count = Math.floor(-left / li_Width)
            // console.log(count)
            // 调用自动换颜色的按钮函数
            auto_btn(count)
        }, 1)
    }

    // 图片左右切换按钮
    {
        var left_btn = document.getElementById("left")
        var right_btn = document.getElementById("right")
        // 左切换按钮
        left_btn.addEventListener("click", function () {
            let upper = Math.floor(-left / li_Width) - 1
            if (upper === -1) {
                upper = imgList.length - 2
            }
            img_position(upper)
        })
        // 右切换按钮
        right_btn.addEventListener("click", function () {
            let lower = Math.floor(-left / li_Width) + 1
            if (lower === 5) {
                lower = 0
            }
            img_position(lower)
        })
    }

    // 5个切换按钮
    {
        // 跟随图片变色
        function auto_btn(count) {
            // 循环将按钮的背景颜色设置为空
            for (let i = 0; i < btn.length; i++) {
                btn[i].style.backgroundColor = ""
            }
            /*
                一共有6张图片,count=Math.floor(-left/li_Width)的值能得到5
                所以当它为5的时候把它的值修改为4或者0防止报错
             */
            if (count >= 5) {
                count = 0
            }
            btn[count].style.backgroundColor = "pink"
        }
        //点击按钮切换图片
        Btn.addEventListener("click",function (event){
            // 改变背景颜色
            auto_btn(event.target.value)
            // 改变图片
            img_position(event.target.value)
        })
        // 当鼠标放在图片上时图片停止播放
        ob_imgList.onmouseover=function (){
            clearInterval(timer)
            clearTimeout(Timer)
        }
        // 当鼠标离开图片时开启计时器(图片继续播放)
        ob_imgList.onmouseout=function (){
            carousel()
        }
    }

    // 图片定位函数
    function img_position(count) {
        let lt = -li_Width * count
        ob_imgList.style.left = lt + "px"
        left = lt
    }

    // 获取样式的函数
    function getStyle(box, style) {
        let box1 = document.getElementById(box);
        return box1[style];
    }

    carousel()
</script>
</body>
</html>
